<template>
  <div class="son">
      <div class="nav">
         <router-link to="/son/music" active-class="active">推荐音乐</router-link> 
         <router-link to="/son/hot" active-class="active">热歌榜</router-link> 
         <router-link to="/son/search" active-class="active">搜索</router-link> 
      </div>
      <!-- 选项卡要展示的内容 -->
      <router-view>

      </router-view>
  </div>
</template>
<script>
export default {
  name: "Son",
  components: {},
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
    .son  .nav{
        display: flex;
        justify-content: space-around;
        font-size: 24px;
    }
    .active{
        color: red;
        border-bottom: 1px solid red;
    }
</style>